<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表-查询结果</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/courseList.css">
    <link rel="stylesheet" href="css/model.css">

    <style>

        [v-cloak] {
            display: none;
        }

        #noResultPic {
           margin-left: 40%;
        }

        #info {
            margin-left: 43%;
        }
    </style>

</head>
<body>

<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    <div class="header-body">
        <div class="header-container container">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">
                        <div class="header-logo">
                            <p><a href="front_home.html">MEOW</a>&emsp;</p>
                            <p>></p>
                            <p>&emsp; <a href="front_courseList.html">课程列表</a>&emsp;</p>
                            <p>></p>
                            <p>&emsp; 课程查询结果</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</header>




</div>

<div id="courseList">


    <div id="content" v-cloak>
        <div class="div-relative" id="a" v-for="item in currentPageData">
            <div class="bg1" :style="{backgroundImage: 'url(' + item.image + ')', backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}"></div>
            <div class="bg2"></div>
            <div class="bg3" @click="onclick(item)">
                <h4>{{ item.name }}</h4>
                <p>{{ item.deptName }}</p>
                <p>{{ item.cotypeName }}</p>
                <p>{{ item.tetyName }}</p>
            </div>
        </div>

    </div>

    <nav aria-label="">
        <ul class="pager">
            <li id="prev"><a href="#"><span aria-hidden="true">&larr;</span>Previous</a></li>
            <li id="next"><a href="#">Next<span aria-hidden="true">&rarr;</span></a></li>
        </ul>
    </nav>

</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/theme.js"></script>
<script src="js/theme.init.js"></script>
<script>

    var courseName = window.localStorage.getItem("courseName");
    var belong = window.localStorage.getItem("belong");
    var courseDiv = window.localStorage.getItem("courseDiv");
    
    var a = new Vue({
        el: "#content",
        data: {
            courseName: courseName,
            belong: belong,
            courseDiv: courseDiv,
            courses: [],        //所有课程数据
            currentPageData: [],    //当前页显示内容
            totalPage:1,        //页面数量
            currentPage:1,      //当前页号
            pageSize: 8     //每一页显示数据量
        },
        mounted: function() {
            this.getSearchResult();
        },
        methods: {
            getSearchResult: function () {
                var that = this;
                axios.get("http://39.108.233.68:8002/course/selByBasic?courseName=" + that.courseName + "&belong=" + that.belong + "&courseDiv=" + that.courseDiv).then(
                    function (response) {
                        if (response.data.data.length === 0) {
                            $("#courseList").html(" <img id=\"noResultPic\" src=\"img/noResult.png\">\n" +
                                "    <h3 id=\"info\">未查询到数据</h3>");
                        } else {
                            that.courses = response.data.data;
                            for (var i = 0; i < response.data.data.length; i++) {
                                if (response.data.data[i].image === null || i===5)
                                    response.data.data[i].image = "img/noPic.jpg";
                                else
                                    response.data.data[i].image = "https://www.luckyone.club/software/lesson/" + that.courses[i].image;
                                //console.log(that.courses[i].image);
                            }
                            //计算一共有多少页
                            that.totalPage = Math.ceil(that.courses.length / that.pageSize);
                            //当计算结果为0时设置页号为1
                            that.totalPage = that.totalPage === 0 ? 1 : that.totalPage;
                            that.setCurrentPageData();
                            console.log(that.currentPageData);

                            /*上一页*/
                            $("#prev").click(function () {
                                console.log(that.currentPage);
                                if (that.currentPage === 1)
                                    return;
                                that.currentPage--;
                                that.setCurrentPageData();
                            });

                            /*下一页*/
                            $("#next").click(function () {
                                console.log(that.currentPage);
                                if (that.currentPage === that.totalPage)
                                    return;
                                that.currentPage++;
                                that.setCurrentPageData();
                            });
                        }
                    }
                );
            },
            setCurrentPageData: function () {
                let begin = (this.currentPage - 1)* this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.courses.slice(begin, end);
            },
            onclick: function (courseInfo) {
                console.log(courseInfo);
                window.localStorage.setItem("id", courseInfo.id);
                window.location.href = "front_course.html";
            }
            
        }
    });
    

</script>

</body>
</html>